<template>
	<div class="p-table">
		<add-property @flash="getTableData()"></add-property>
		<el-table :data="tableData" stripe>
			<el-table-column label="ID" prop="id"></el-table-column>
			<el-table-column label="属性名称" prop="name"></el-table-column>
			<el-table-column label="编辑" align="center">
				<template slot-scope="scope">
					<edit-property :row="scope.row" @flash ="getTableData()"></edit-property>
				</template>
			</el-table-column>>
			<el-table-column label="删除" align="center">
				<template slot-scope="scope">
					<del-property :row="scope.row" @flash="getTableData()"></del-property>
				</template>
			</el-table-column>
		</el-table>
		<page-num :totalPages="totalPages" :currentPage="currentPage"></page-num>
	</div>
</template>

<script>
	import AddProperty from './add_property.vue'
	import EditProperty from './edit_property.vue'
	import DelProperty from './del_property.vue'
	import PageNum from './page_num.vue'
  import {getProperties} from '@/api/admin/property.js'
	export default{
		data() {
			return {
				tableData: [],
        totalPages : null,
        currentPage : 1,
			}
		},
		components: {
			AddProperty,
			EditProperty,
			DelProperty,
			PageNum
		},
		methods: {
			getTableData() {
       this.currentPage = this.$route.query.pageId ? this.$route.query.pageId : 1
        let data = {
          cid:this.$route.query.id,
          start:this.currentPage
        }
        getProperties(data).then(res => {
          this.tableData = res.data.pageFromJPA.content
          this.totalPages = res.data.totalPages
        })
			}
		},
    created() {
      this.getTableData()
    },
    watch: {
      $route(newValue, oldValue) {
        this.getTableData()
      }
    },
	}
</script>

<style scoped>
	.p-table{
		width: 90%;
		margin: 20px auto;
	}
</style>
